import React from 'react';
import { Table as AntdTable } from 'antd';
import type { TableProps as AntdTableProps } from 'antd';
import { createStyles } from 'antd-style';

export interface TableProps extends AntdTableProps {
  /**
   * @description 自定义样式类名
   */
  customClassName?: string;
  /**
   * @description 表格引用
   */
  ref?: React.Ref<any>;
}

const useStyles = createStyles(({ token, css }) => ({
  table: css`
    border-radius: ${token.borderRadius}px;
    .ant-table-thead > tr > th {
      background-color: ${token.colorBgContainer};
    }
  `,
}));

const TableComponent = React.forwardRef<any, TableProps>(({ customClassName, className, ...restProps }, ref) => {
  const { styles, cx } = useStyles();
  
  const tableClassName = cx(
    className,
    customClassName,
    styles.table
  );

  return <AntdTable ref={ref} className={tableClassName} {...restProps as any} />;
});

const Table = Object.assign(TableComponent, {
  Summary: AntdTable.Summary,
  Column: AntdTable.Column,
  ColumnGroup: AntdTable.ColumnGroup,
  EXPAND_COLUMN: AntdTable.EXPAND_COLUMN,
  SELECTION_COLUMN: AntdTable.SELECTION_COLUMN,
  SELECTION_ALL: AntdTable.SELECTION_ALL,
  SELECTION_INVERT: AntdTable.SELECTION_INVERT,
  SELECTION_NONE: AntdTable.SELECTION_NONE,
});

export { Table };
export default Table;

